<template>
    <div class="w750">
        <div>
            <div class="d-flex a-center j-sb p-1 bg-fff font-16">
                <div>服务商头像</div>
                <div style="width: 60px; height: 60px">
                    <img v-if="userInfo.avatarUrl" :src="$imgUrlHead + userInfo.avatarUrl" class="w-100 h-100 rounded-circle" alt />
                    <img v-else src="../../assets/images/head-default.png" class="w-100 h-100" alt />
                </div>
            </div>
            <div class="d-flex a-center j-sb p-1 bg-fff font-16 mt-1">
                <div>服务商姓名</div>
                <div class="text-999">{{ userInfo.actualName }}</div>
            </div>
            <div class="d-flex a-center j-sb p-1 bg-fff font-16 mt-1">
                <div>服务商级别</div>
                <div class="text-999">
                    <span>{{ userInfo.serviceProvidersType == 'CITY_TYPE' ? '市级服务商' : '区级服务商' }}</span>
                </div>
            </div>
            <div @click="showDialogStatus" class="d-flex a-center j-sb p-1 bg-fff font-16 mt-1">
                <div>服务商状态</div>
                <div class="d-flex a-center">
                    <div class="text-999 mr">{{ userInfo.status | getStatus }}</div>
                    <div class="iconfont iconArrowRight" style="font-size: 14px; color: #c0c4d6"></div>
                </div>
            </div>
            <div @click="logout" class="bg-fff text-center py-15p mt-5 mx-25p font-14 rounded-3">
                <span>退出登录</span>
            </div>
        </div>

        <!-- 底部栏 -->
        <div class="position-fixed bottom-0 w-100 bg-fff"  style="max-width:750px">
            <div class="grid-column2 text-center py">
                <div class="d-flex flex-column a-center" @click="$toPage('/facilitatorIndex')">
                    <div style="width: 25px; height: 25px">
                        <img src="@/assets/images/facilitatorIndex.png" alt="" class="w-100 h-100" />
                    </div>
                    <div class="font-12 mt-02">首页</div>
                </div>
                <div class="d-flex flex-column a-center" style="color: #007fff">
                    <div style="width: 25px; height: 25px">
                        <img src="@/assets/images/facilitatorMy-active.png" alt="" class="w-100 h-100" />
                    </div>
                    <div class="font-12 mt-02">我的</div>
                </div>
            </div>
        </div>

        <!-- 退出申请弹窗 -->
        <van-dialog
            v-model="showDialog"
            show-cancel-button
            cancel-button-text="我再想想"
            cancel-button-color="#333"
            confirm-button-text="提交申请"
            confirm-button-color="#586B95"
            @confirm="submitLogout"
        >
            <slot name="title">
                <div class="text-center pt-3 pb-2 font-weight font-18">
                    <span>退出服务商</span>
                </div>
            </slot>
            <div class="px-15p text-999 font-16 pb-3">
                <span>如果您当前所在区域有订单未结算完成，退出则拿不到正在进行订单佣金，以当前已结算订单为主，请谨慎操作！</span>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import oauthService from 'service/oauth'
import { providersDetail, providersApplyExit } from 'api/facilitator'

export default {
    name: '',
    components: {},
    data() {
        return {
            showDialog: false, // 退出服务商弹窗
            userInfo: {}
        }
    },
    filters: {
        getStatus(value) {
            const dict = {
                NORMAL: '正常',
                APPLY_EXIT: '退出待审核',
                OUSTER: '开除'
            }
            return dict[value]
        }
    },
    mounted() {
        this.gerUserInfo()
    },
    methods: {
        // 获取用户详情
        gerUserInfo() {
            providersDetail()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.userInfo = res.result
                })
                .catch((err) => {
					
                })
        },

        // 提交退出申请
        submitLogout() {
            providersApplyExit()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.$toast('已成功提交申请~')
                    this.gerUserInfo()
                })
                .catch((err) => {
                })
        },

        //退出登录
        logout() {
            this.$dialog
                .confirm({
                    title: '退出登录',
                    message: '是否确认退出登录',
                    confirmButtonColor: '#586B95'
                })
                .then(() => {
                    oauthService.logout().then((res) => {
                        if (res.success) {
                            this.$router.push('/facilitatorLogin')
                        } else {
                            this.$toast(res.msg)
                        }
                    })
                })
        },

        showDialogStatus() {
            if (this.userInfo.status != 'NORMAL') {
                return
            }
            this.showDialog = true
        }
    }
}
</script>
